<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link href="/assets/css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/font/css/font-awesome.min.css"/>
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="/assets/css/ace-ie.min.css"/>
    <script type="text/javascript" src="/js/html5.js"></script>
    <script type="text/javascript" src="/js/respond.min.js"></script>
    <script type="text/javascript" src="/js/PIE_IE678.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="/css/style.css"/>
    <link href="/assets/css/codemirror.css" rel="stylesheet">
    <link rel="stylesheet" href="/assets/css/ace.min.css" />
    <link rel="stylesheet" href="/Widget/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="/assets/css/font-awesome.min.css" />
    <!--[if IE 7]>
    <link rel="stylesheet" href="/assets/css/font-awesome-ie7.min.css" />
    <![endif]-->
    <link href="/Widget/icheck/icheck.css" rel="stylesheet" type="text/css" />
    <link href="/Widget/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    <script src="/js/jquery-1.9.1.min.js"></script>
    <script src="/assets/js/bootstrap.min.js"></script>
    <script src="/assets/js/typeahead-bs2.min.js"></script>
    <script src="/assets/layer/layer.js" type="text/javascript" ></script>
    <script src="/assets/laydate/laydate.js" type="text/javascript"></script>
    <script type="text/javascript" src="/Widget/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="/Widget/icheck/jquery.icheck.min.js"></script>
    <script type="text/javascript" src="/Widget/zTree/js/jquery.ztree.all-3.5.min.js"></script>
    <script type="text/javascript" src="/Widget/Validform/5.3.2/Validform.min.js"></script>
    <script type="text/javascript" src="/Widget/webuploader/0.1.5/webuploader.min.js"></script>
    <script type="text/javascript" src="/Widget/ueditor/1.4.3/ueditor.config.js"></script>
    <script type="text/javascript" src="/Widget/ueditor/1.4.3/ueditor.all.min.js"> </script>
    <script type="text/javascript" src="/Widget/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
    <script src="/js/lrtk.js" type="text/javascript" ></script>
    <script type="text/javascript" src="/js/H-ui.js"></script>
    <script type="text/javascript" src="/js/H-ui.admin.js"></script>

    <title>增加采购订单</title>
</head>

<style>
    /*头部样式*/
    .procurement-details {
        text-align: center;
    }

</style>

<!--弹窗样式-->


<body>
<div class="margin clearfix">
    <div class="Refund_detailed">
        <!--标题-->
        <div class="detailed_style">
            <div class="Receiver_style">
                <div class="Numbering"><h1 class="procurement-details"><b>添加采购申请单</b></h1></div>
                <div class="Info_style clearfix">
                    <!--下拉列表选择供应商-->
                    <div class="search_style">
                        <ul class="search_content clearfix">
                            <li style="width:300px" th:border="2px">
                                <select name="sup" id="sup" class="form-control" onchange="getproduct()">
                                    <option value="all" selected="selected">选择供应商</option>
                                    <option th:each="s : ${sup}" th:text="${s.getSupplier_name()}"
                                            th:value="${s.getSupplier_id()}"></option>
                                </select>
                            </li>
                            <!--供应商的拥有的产品类型-->
                            <!--  <li style="width:180px" th:border="2px">
                                  <select name="type" id="type" class="form-control">
                                      <option  th:value="alls" th:placeholder="产品类型选择">产品类型选择</option>
                                      <option  th:each="type : ${types}" th:text="${type.getProtype_name()}" th:value="${type.getProtype_id()}"></option>
                                  </select>
                              </li>-->
                            <!--通过添加按钮,触发事件.弹出添加框-->
                            <a><input type="button" class="btn-primary" style="width: 120px; height: 32px" value="添加商品"
                                      th:onclick="add_product()"/></a>
                            <!--根据后台判断,供应商是否有货物提供,没有则显示提示信息-->
                            <h1 style="color:#ee162d; text-align: center" th:text="${msg}"
                                th:if="${not #strings.isEmpty(msg)}"></h1>
                        </ul>
                    </div>


                    <!--列表详情-->
                        <table class="table table-striped table-bordered table-hover" id="sample_table">
                            <thead>
                            <tr>
                                <th width="50px">商品编号</th>
                                <th width="80px">商品名称</th>
                                <th width="80px">价格</th>
                                <th width="80px">数量</th>
                                <th width="80px">金额</th>
                                <th width="80px">供应商</th>
                                <th width="150px">操作</th>
                            </tr>
                            </thead>
                            <!--用于后面拼接使用-->
                            <tbody>
                            </tbody>
                            <!--  <tbody>
                               <tr th:each="prod : ${product}">
                                  <td th:text="${prod.getProduct_id()}" th:if="${not #strings.isEmpty(prod.getProduct_id())}"></td>
                                  <td th:text="${prod.getProduct_name()}" th:if="${not #strings.isEmpty(prod.getProduct_name())}"></td>
                                  <td>1</td>
                                  <td><input type="text" value="" th:placeholder="0"/></td>
                                  <td>123</td>
                                  <td><a href="javascript" title="删除" class="btn btn-xs btn-warning" >删除</a></td>
                              </tr>
                              </tbody>-->
                        </table>
                        <p>总计：<span id="total">0</span>元</p>
                    <div class="clearfix cl">
                        <div class="Button_operation" style="position: absolute; right:-30px; bottom:-50px">
                            <button onclick="submitproduct();" class="btn btn-primary radius" type="button"><i
                                    class="icon-save "></i>提交申请
                            </button>
                            <button onclick="ReturnshowAll();" class="btn btn-danger radius" type="button"><i
                                    class="icon-undo "></i>返回主页
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--弹出的添加窗口-->
<!-- style="display:none"表示会隐藏该表单  style="display:block"表示会显示该表单.-->
<div id="add_pro" style="display: none">
    <!--商品下拉列表-->
    <div>
        <label class="form-label col-2" style="font-size: 18px;width: 100px;text-align: center;margin-top:40px"><span
                class="">选择商品:</span></label>
        <select class="select" id="product_select" name="product_names"
                style="width: 300px;margin-top: 40px;margin-left: 10px" onchange="Getprice()">
            <option value="0" selected="selected">选择商品</option>
        </select>
        <span id="protypeInfo" style="color: red;"></span>
    </div>
    <!--价格-->
    <div>
        <label class="form-label col-2" style="font-size: 18px;width: 100px;text-align: center;margin-top:40px"><span
                class="">商品单价:</span></label>
        <input style="width: 300px;margin-top: 40px" id="price" name="pro_price" type="text" value="" readonly/>
        <span id="protypeInfo2" style="color: red;"></span>
    </div>
    <!--数量-->
    <div>
        <label class="form-label col-2" style="font-size: 18px;width: 100px;text-align: center;margin-top:40px"><span
                class="">商品数量:</span></label>
        <input style="width: 300px;margin-top: 40px" id="much" name="pro_much" type="text" value=""
               onchange="getcount(this)" placeholder="0"/>
        <span id="protypeInfo3" style="color: red;"></span>
    </div>
    <!--金额-->
    <div>
        <label class="form-label col-2" style="font-size: 18px;width: 100px;text-align: center;margin-top:40px"><span
                class="">购买总额:</span></label>
        <input style="width: 300px;margin-top: 40px" id="count" name="pro_count" type="text" value="" readonly/>
        <span id="protypeInfo4" style="color: red;"></span>
    </div>

</div>


</body>

<script th:inline="none" type="text/javascript">

    // 触发添加采购订单事件 , 要将隐藏的窗口栏弹出
    function add_product() {
        layer.open({
            type: 1,
            title: '添加采购商品',
            area: ['600px', '500px'],
            shadeClose: true,
            content: $('#add_pro'),
            resize: true,
            btn: ['确认', '取消'],
            yes: function (index, layero) {
                // 每次先清空
                var regu = /^\+?[1-9]\d*$/;
                // 分别将添加的商品值进行赋值 用于后面的拼接
                var productid = $("#product_select option:selected").val();
                var productname = $("#product_select option:selected").text();
                var much = $("#much").val();
                var price = $("#price").val();
                var count = $("#count").val();
                var supplier = $("#sup").val();
                if (!regu.test(much) || much < 1 || productname == '选择商品') {
            $("#sup option[value='all']").prop("selected", "selected");
                    // 对商品选择栏进行清空
                    $("#product_select option[value='0']").prop("selected", "selected");
                    // 关闭按钮
                    layer.msg('请选择产品和输入正确的数量', {
                        icon: 2,
                        time: 3000 //2秒关闭（如果不配置，默认是3秒）
                    });
                    // 触发该事件时 先进性清空
                    $("#count").val("");
                    $("#much").val("");
                    $("#price").val("");
                    layer.close(index);
                } else {
                    // 设置标志
                    var flag = false;
                    // 获取到这次添加的商品是否存在
                    var pid;
                    var sid;
                    // 循环出 商品的名称
                    $.each($("#sample_table tbody tr"), function () {
                        // 获取到当前所有 商品名称
                        pid = $(this).find("td").eq(0).text();
                        sid = $(this).find("td").eq(5).text();
                        // 判断 如果是同一个供应商 并且是同一个商品才实现商品数量的累加
                        if (pid == productid && sid == supplier){
                            // 获取到 相同名称这一列的数量
                            var n = $(this).find("input").val();
                            // 将输入框的数量 加上 添加栏的数量进行相加 并且修改总价与金额
                            // 重新赋值
                            var muchs = Number.parseInt(n) + Number.parseInt(much);
                            // 更新数量
                            $(this).find("input").val(muchs);
                            // 更新金额
                            $(this).find("td").eq('4').html(Number.parseInt(muchs) * Number.parseFloat(price));
                            // 调取重新计算总计的方法
                            totlaprice();
                            // 并且标识为真
                            flag = true;
                            // 清空
                            // 触发该事件时 先进性清空
                            $("#count").val("");
                            $("#much").val("");
                            $("#price").val("");
                            // 对供应商下拉框进行清空
                            $("#sup option[value='all']").prop("selected", "selected");
                            // 对商品选择栏进行清空
                            $("#product_select option[value='0']").prop("selected", "selected");
                            layer.close(index);
                        }
                    })
                    // 判断如果存在重复已选的商品 则直接将商品数量添加到已存在的数量中
                    // $(much).parents("tr").find("td").eq(4).html(Number.parseInt(num)*Number.parseFloat(prices));
                    if (flag) {
                        layer.close(index);
                        return;
                    } else {
                        // 进行拼接
                        $("#sample_table tbody").append("<tr class='length_trs'><td>" + productid + "</td><td>" + productname + "</td><td>" + price + "</td><td><input value='" + much + "' style='border:none;text-align: center;background:transparent' onchange='changemuch(this)' onfocus='hold(this)'></td><td>" + count + "</td><td>" + supplier + "</td><td><a title='删除' href='javascript:;' class='btn btn-xs btn-danger' onclick='remove(this)'><i class='icon-trash  bigger-120'></i>删除</a></td></tr>");
                        // 对供应商下拉框进行清空
                        $("#sup option[value='all']").prop("selected", "selected");
                        // 对商品选择栏进行清空
                        $("#product_select option[value='0']").prop("selected", "selected");
                        totlaprice();
                        $("#count").val("");
                        $("#much").val("");
                        $("#price").val("");
                        // 对供应商下拉框进行清空
                        $("#sup option[value='all']").prop("selected", "selected");
                        // 对商品选择栏进行清空
                        $("#product_select option[value='0']").prop("selected", "selected");
                        // 关闭按钮
                        layer.close(index);
                    }

                }
            },
        })
    }

    // 发送AJAX 通过供应商ID 获取到商家提供的产品
    function getproduct() {
        $.ajax({
            type: "get",
            url: "/procurement/getproduct",
            data: {id: $("#sup").val()},
            dataType: "json",
            success: function (data) {
                // 便于调试 看到在页面中输出的内容
                console.log(data);
                $("#product_select").html('<option value="0">选择商品</option>');
                $.each(data, function (i, obj) {
                    /*根据供应商ID 选择供应拥有的产品*/
                    $("#product_select").append('<option title="' + obj.product_name + '" value="' + obj.product_id + '">' + obj.product_name + '</option>')
                })
            },
            error: function (data) {
                alert("失败")
            }
        })
    }

    // 发送AJAX 通过商品ID 获取到对应的价格
    function Getprice() {
        $.ajax({
            type: "get",
            url: "/procurement/price",
            data: {pid : $("#product_select option:selected").val(),sid : $("#sup").val()},
            dataType: "json",
            success: function (data) {
                // 便于调试 看到在页面中输出的内容
                console.log(data);
                // 操作Dom 实现动态赋值
                // 单价
                $("#price").val(data);
                // 并且情况上面的元素
                $("#count").val("");
                $("#much").val("");
            },
            error: function (data) {
                alert("失败")
            }
        })
    }

    // 输入数量获取总价
    function getcount() {
        var price = document.getElementById("price").value;
        var much = document.getElementById("much").value;
        var rcount = (price * 100000) * (much * 100000) / 10000000000;
        $("#count").val(rcount);
    }

    // 删除功能
    function remove(object) {
        // $(object).parent().parent(); 表示删除它父级元素的父级元素

        // 删除它的父级元素 <tr>
        $(object).parents("tr").remove();
        // 调用总计方法,对总计重新进行计算
        totlaprice();
    }

    // 按钮用于返回展示页面
    function ReturnshowAll() {
        window.location.href = "/procurement/showAll";
    }

    // 提交按钮时 获取总计
    function totlaprice() {
        // 循环
        var total = 0;
        $.each($("#sample_table tbody tr"), function () {
            var subtotal = $(this).find("td").eq(4).text();
            total = Number.parseFloat(subtotal) + total;
        })
        alert(total)
        $("#total").html(total);
    }

    // 全局用于保存原来的数量
    var holdnum = 0;

    // 首先存入原有的数量
    function hold(object) {
        holdnum = $(object).val();
    }

    // 展示页面时更改数量
    function changemuch(much) {
        // 接收输入的值
        var num = $(much).val();
        // 正则表达
        var regu = /^\+?[1-9]\d*$/;
        // 进行判断
        if (num < 1 || !regu.test(num)) {
            layer.msg('请输入正确的正整数', {
                icon: 2,
                time: 3000, //2秒关闭（如果不配置，默认是3秒）
            });
            // 数据回滚
            $(much).val(holdnum);
        } else {
            // 取到对应的价格
            var prices = $(much).parents("tr").find("td").eq(2).text();
            // alert(prices)
            // 获取到更改数量的那列的 金额 对其重新赋值
            $(much).parents("tr").find("td").eq(4).html(Number.parseInt(num) * Number.parseFloat(prices));
            // 更新总计
            totlaprice();
        }
    }

    // 提交申请是判断表中是否有数据
    function isHasData() {
        // class 是拼接时 给tr赋的值
        var lengths = $("#sample_table tbody tr[class='length_trs']").length;
        if (lengths == 0) {
            return false;
        } else {
            return true;
        }
    }


    // 提交申请
    function submitproduct() {
        // 果然有数据 获取需要的数据发送到后台
        if (isHasData()) {
            // 定义数组 存储数据
            var lists = [];
            var amounts = [];
            var gs = [];

            // 循环
            $(".length_trs").each(function (i, obj) {
                var i  = ($(obj)).find("td").eq('0').text();
                lists.push(i);
            })

            $(".length_trs").each(function (i, obj) {
               var j = ($(obj).find('input').val());
               amounts.push(j);
            })

            $(".length_trs").each(function (i, obj) {
                var z = ($(obj).find("td").eq('5').text());
                gs.push(z);
            })

            var prodata = {
                lists:lists,
                amounts:amounts,
                gs:gs
            };
            $.get("/procurement/applyof",prodata,function(result){
            if(result >= 1){
                layer.msg('添加成功！', {
                    icon: 1,
                    time: 1500
                },function(){
                    // 直接删原有添加的商品信息
                    $(".length_trs ").remove();
                    /*window.location.href = "/procurement/showAll";*/
                    $("#total").text("");
                });
            }else{
                layer.msg('添加失败', {
                    icon: 0,
                    time: 1500
                });
                //
            }
        })
        }else {
            layer.msg('请先添加商品', {
                icon: 2,
                time: 3000,
            });
        }
    }
</script>

</html>
